<template>
  <section class="todoapp">
    <todo-header @add="add"></todo-header>
    <todo-main :list="list" @del="del"></todo-main>
    <todo-footer :list="list"></todo-footer>
  </section>
</template>

<script>
import TodoFooter from '@/components/TodoFooter.vue'
import TodoMain from '@/components/TodoMain.vue'
import TodoHeader from '@/components/TodoHeader.vue'
export default {
  components: {
    TodoFooter,
    TodoMain,
    TodoHeader
  },
  data () {
    return {
      list: [
        { id: 1, name: '读万卷书', completed: true },
        { id: 2, name: '行万里路', completed: false },
        { id: 3, name: '凛冬将至', completed: false }
      ]
    }
  },
  methods: {
    del (id) {
      this.list = this.list.filter(item => item.id !== id)
    },
    add (name) {
      this.list.unshift({
        id: Date.now(),
        name,
        isDone: false
      })
    }
  }
}
</script>

<style></style>
